<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>登录界面</title>
<style type="text/css">
body {
	font-family: 楷体;
	font-size: 20px;
	background-image: url("../images/1.png");
	background-size: cover;
}

h1 {
	float: left;
	padding-left: 10%;
	color: #fff;
	font-size: 50px;
	font-family:"STXingkai";
	background-color: "Light purple";
}

table {
	position: absolute;
	left: 55%;
	padding: 4% 4% 6% 3%;
	margin-right: 10%;
	margin-top: 0%;
	color: #fff;
	border-collapse: separate;
	border-spacing: 10px 20px;
}

.text {
	position: relative;
}

.form-control {
	width: 200px;
	padding: 7px 0px;
	color: #fff;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}

.form-control:focus {
	border-color: rgba(59, 137, 245, 0.5);
	outline: 0;
}

.box {
	background: rgba(0, 0, 1, .7);
	box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
	border-radius: 10px;
}

.submit {
	width: 80%;
	height: 50px;
	background-color: #3B89F5;
	border: none;
	font-size: 18px;
	color: #fff;
	border-radius: 8px;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.submit:HOVER {
	background-color: #0C6CED;
	color: #fff;
	cursor: pointer;
}

.Hyperlink {
	text-decoration: none;
}
.a::HOVER {
	position: absolute;
	left: 15px;
	top: 20px;
	padding: 50px;
	background-color: #0095ff;
	border-radius: 5px;
	color: #fff;
	content: attr(title);
	z-index: 2;
	width: 120px;
}

.b::HOVER {
	position: absolute;
	left: 15px;
	top: 5px;
	padding: 5px;
	background-color: #0095ff;
	border-radius: 5px;
	color: #fff;
	content: attr(title);
	z-index: 2;
	width: 120px;
}
</style>
<script type="text/javascript">
	function changeImageCode() {
		var codeImg = document.getElementById("imagecode");
		codeImg.src = "../Auth?d=" + Math.random();
	}
</script>
<script type="text/javascript">
	function mp3() {
		var myAuto = document.getElementById('myaudio');
		myAuto.play();
	}
</script>
</head>
<body>
	<h1>和园一号新闻发布系统</h1>
	<form action="../User_LoginServlet" method="post">
		<table align="right" class="box">

			<tr>
				<td style="font-size: 30px;">登录界面</td>
				<td style="font-size: 13px;" align="right">没有账号?
					<h2>
						<a title="快速注册" href="resgistered.jsp" class="Hyperlink">注册</a>
					</h2>
				</td>
			</tr>

			<tr>
				<td class="text" align="center"><p>用户：</p></td>
				<td><input class="form-control form-input a" type="text"
					title="请输入用户名" name="uname" value="" autofocus="autofocus"></td>
			</tr>

			<tr>
				<td class="text" align="center" valign="bottom"><p>密码：</p></td>
				<td><input class="form-control form-input b" type="password"
					title="请输入密码" name="pass" value=""></td>
			</tr>
			<tr>
			<td class="text" align="center">验证码：</td>
			<td><input type="text" name="CheckCode"
				class="form-control form-input b" title="请输入验证码"></td>
			<td><img alt="验证码" id="imagecode" src="../Auth" /></td>
			<td><a href="javascript:changeImageCode();">看不清楚，换一张 </a></td>
			</tr>

			<tr>
				<td colspan="2" align="center"><p></p> <input class="submit" type="submit" value="登录">
					<p></p></td>
			</tr>

		</table>
	</form>
</body>

</html>